<template>
  <div id="map">

  </div>
  <div class="select-box">
    <a-select
      ref="select"
      v-model:value="state.selectVal"
      style="width: 120px"
      @focus="focus"
      @select="handleSelect"
    >
      <a-select-option v-for="(item, index) in state.styleOpts" :value="item.code">{{ item.label }}</a-select-option>
    </a-select>
  </div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import {onMounted, reactive} from "vue";

let map;
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'

  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id
    style: 'mapbox://styles/mapbox/streets-v12', // 地图样式
    center: {lng: 119, lat: 34.3}, // 地图初始中心
    zoom: 8, // 地图初始缩放级别
    projection: 'globe', // 地图投影为3D
    pitch: 32, // 相对于地图3D视角的角度
    antialias: true, // 坑锯齿效果
    essential: true,
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
  })
  // Add a scale control(缩放控制插件) to the map
  map.addControl(new mapboxgl.ScaleControl());
  // Mapbox汉化处理
  map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
  }));
})

const state = reactive({
  selectVal: 'mapbox://styles/mapbox/streets-v12',
  styleOpts: [
    {
      code: 'mapbox://styles/mapbox/streets-v12',
      label: 'streets-v12'
    },
    {
      code: 'mapbox://styles/mapbox/standard',
      label: 'standard'
    },
    {
      code: 'mapbox://styles/mapbox/streets-v11',
      label: 'streets-v11'
    },
    {
      code: 'mapbox://styles/mapbox/outdoors-v11',
      label: 'outdoors-v11'
    },
    {
      code: 'mapbox://styles/mapbox/light-v10',
      label: 'light-v10'
    },
    {
      code: 'mapbox://styles/mapbox/dark-v10',
      label: 'dark-v10'
    },
    {
      code: 'mapbox://styles/mapbox/satellite-v9',
      label: 'satellite-v9'
    },
    {
      code: 'mapbox://styles/mapbox/satellite-streets-v11',
      label: 'satellite-streets-v11'
    },
    {
      code: 'mapbox://styles/mapbox/navigation-day-v1',
      label: 'navigation-day-v1'
    },
    {
      code: 'mapbox://styles/mapbox/navigation-night-v1',
      label: 'navigation-night-v1'
    }
  ]
})
const handleSelect = (value, option) => {
  map.setStyle(value)
}
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}
.select-box {
  border: 1px solid #0070ff;
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
